L'essenziale del linguaggio Java per realizzare l'insieme di Mandelbrot e di Julia.

Capitolo 5:
Come miglorare la grafica delle nostre immagini
usando le barre di scorrimento.

Ora cercheremo di rendere più interessanti e magari un poco artistici i nostri ingrandimenti, ma per farlo dobbiamo avere la possibilità di cambiare continuamente e con facilità alcuni parametri a queesto scopo, aggiungeremo di 4 barre di scorrimento "scroll bars" e due caselle di controllo "check boxes". alla nostra applet.
Ma prima vediamo alcune immagini d'esempio.

Come potete vedere la prima immagine è molto più colorata e i filamenti verde chiaro che si diramano dall'insieme di mandelbrot, quasi non si notano sul fondo verde scuro.


Mentre la seconda immagine, con il giallo intenso fa emergere dallo sfondo scuro ogni dettaglio dell'insieme di mandelbrot.


Agendo sulle barre di scorrimento possiamo variare le tonalità dei colori oppure aumentare o diminuire il numero dei cicli che sono collegati alla quantità dei dettagli dell'immagine.

Anche qui un prima e un dopo,

notate come quelle decorazioni che sembrano cavallucci marini quasi non si notino in questa immagine a sinistra.

mentre in questa colpiscano l'occhio e sembrino molto più definiti.

LO stesso discorso vale per queste due immagini qui sotto.
Come si vede l'utilizzo delle barre di scorrimento amplia di molto le potenzialità delle nostre applet.

Questo sotto è il listato riguardante l'utilizzo delle scroll bars, tutte le parti nuove come al solito sono commentate.

/* I commenti verranno aggiunti solo alle parti del linguaggio java che non sono state viste nei capitoli precedenti */ // Mand_Scroll2 //Like the previous file, the new lines are in red color, and the comments marked in green color. import java.awt.*; import javax.swing.*; import static java.lang.Math.*; import java.awt.event.*; import javax.swing.event.*; public class Mand_Scroll2 extends JApplet implements MouseListener, MouseMotionListener { public double zoom=1.0, dist, xbegin= 0.5, ybegin = 0.0, xreal, yimag,distx,disty,zr,zi,nx,ny,zxy,m=25 ; public int maxLoop =100, loop, w,h,p,b,mov2,mov3,redcol,greencol,bluecol; public int n1=4,n2=1,n3=25,n4=1,modulo,clea=0; /* n1, n2, n3, n4 sono i nomi assegnati alle barre di scorrimento, 1, 2, 3, e 4, modulo è il modulo per determinare i colori Rosso, Verde e Blu, e Clea è una variabile per cancellare il quadrato e il cerchio al centro del disegno */ Font font; Panel controlPanel; Scrollbar scrolls1, scrolls2, scrolls3, scrolls4; private boolean movingCircleOut = false; String sliderTextR = "a = (1 - 750): "; String sliderTextr = "b = (1 - 255): "; String sliderTextO = "d = (1 - 255): "; String sliderTextC = "Clear square ?"; String sliderTextn = "c = (1 - 255 ) "; Label sliderLabel1, sliderLabel2, sliderLabel4, sliderLabelC, sliderLabel3, titleLabel; Checkbox insideCheckbox, outsideCheckbox; //Come già dovreste sapere, è necessario dichiarare tutte le variabili prima di poterle utilizzare. public void init() { addMouseListener(this); addMouseMotionListener(this); controlPanel = new Panel(); controlPanel.setBackground(Color.black); controlPanel.setLayout(new GridLayout(14,1)); add("East", controlPanel); /* Le etichette, le barre di scorrimento e le caselle di controllo vengono messi in un contenitore posto sulla destra, con lo sfondo nero e una disposizione di 14 righe e 1 colonna. Naturalmente in Java, ci sono molti altri tipi di layout( impaginazione o struttura dell'appelet) , ho scelto "GridLayout" perché ho pensato che fosse la più appropriata. */ titleLabel = new Label(" Mandel ", 1); font = new Font("Helvetica", Font.BOLD, 17); titleLabel.setFont(font); titleLabel.setBackground(Color.black); titleLabel.setForeground(Color.red); controlPanel.add(titleLabel); /* Creiamo (una nuova etichetta) chiamata (titleLabel) con la parola "Mandel" come titolo, e un tipo di carattere ("Helvetica", Font.BOLD, 17) si assegna il tipo di carattere, setFontQ (font), il colore dello sfondo e il colore delle lettere all'etichetta e aggiungere tutto questo al contenitorte chiamato: Panel.controlPanel.add (titleLabel); */ controlPanel.add(new Label(" ")); // Aggiungiamo un'etichetta vuota al pannello per creare uno spazio vuoto tra due etichette. sliderLabel1 = new Label(sliderTextR + Integer.toString (n1)); /* Creiamo un (nuova etichetta Label) con il nome di TextR ed una stringa con il valore della variabile (n1) associato alla prima barra di scorrimento. */ font = new Font("Helvetica", Font.PLAIN, 12); sliderLabel1.setFont(font); sliderLabel1.setBackground(Color.black); sliderLabel1.setForeground(Color.white); controlPanel.add(sliderLabel1); /* Come prima, si assegna il font, il colore dello sfondo e il colore delle lettere al Label1 e lo aggiungiamo al Pannello */ scrolls1 = new Scrollbar(Scrollbar.HORIZONTAL, n1, 1, 1,751); scrolls1.setBackground(Color.blue); controlPanel.add(scrolls1); /* Creiamo una (nuova Barra di scorrimento) denominato (scrolls1 1) Si tratta di una barra orizzontale con una variabile chiamata (n1), che ha un passo = 1, parte da 1 e termina con 75, ha sfondo blu, e sarà aggiunta al Pannello. */ sliderLabel2 = new Label(sliderTextr + Integer.toString(n2)); font = new Font("Helvetica", Font.PLAIN, 12); sliderLabel2.setFont(font); sliderLabel2.setBackground(Color.black); sliderLabel2.setForeground(Color.white); controlPanel.add(sliderLabel2); scrolls2 = new Scrollbar(Scrollbar.HORIZONTAL, n2, 1, 1, 256); scrolls2.setBackground(Color.blue); controlPanel.add(scrolls2); /* Come sopra, creiamo e aggiungiamo al pannello una nuova etichetta (sliderLabel2) e una nuova barra di scorrimento (scrolls2) con la differenza che la variabile (n2) di questa barra di scorrimento ha un ha un'ampiezza che va da 1 a 256. */ sliderLabel3 = new Label(sliderTextn + Integer.toString(n3)); font = new Font("Helvetica", Font.PLAIN, 12); sliderLabel3.setFont(font); sliderLabel3.setBackground(Color.black); sliderLabel3.setForeground(Color.white); controlPanel.add(sliderLabel3); scrolls3 = new Scrollbar(Scrollbar.HORIZONTAL, n3, 1,1, 256); scrolls3.setBackground(Color.blue); controlPanel.add(scrolls3); /* Come sopra, creiamo e aggiungiamo al pannello una nuova etichetta (sliderLabel3) ed una nuova barra di scorrimento (scrolls3) che regola la variabile (n3). */ sliderLabel4 = new Label(sliderTextO + Integer.toString(n4)); font = new Font("Helvetica", Font.PLAIN, 12); sliderLabel4.setFont(font); sliderLabel4.setBackground(Color.black); sliderLabel4.setForeground(Color.white); controlPanel.add(sliderLabel4); scrolls4 = new Scrollbar(Scrollbar.HORIZONTAL,n4, 1, 1, 256); scrolls4.setBackground(Color.blue); controlPanel.add(scrolls4); /* Come sopra, noi creiamo e aggiungere al pannello una nuova etichetta (sliderLabel4) e una nuova ed ultima barra di scorrimento (scrolls4) che regola la variabile (n4). */ controlPanel.add(new Label(" ")); /* anche qui aggiungiamo un'etichetta vuota al pannello per creare uno spazio vuoto tra due etichette. */ sliderLabelC = new Label(sliderTextC); font = new Font("Helvetica", Font.BOLD, 18); sliderLabelC.setFont(font); sliderLabelC.setBackground(Color.black); sliderLabelC.setForeground(Color.white); controlPanel.add(sliderLabelC); /* Creiamo (nuova etichetta) denominata (sliderLabelC) e un tipo di carattere (new Font), "Helvetica", Font.BOLD, 18, poi si assegna l'altezza del font, il colore dello sfondo (nero)e il colore delle lettere (bianco) e come titolo abbiamo assegnato il valore string visto all'inizio "Clear square ?" e infine la aggiungiamo al Pannello. */ CheckboxGroup CircleInOutGroup = new CheckboxGroup (); insideCheckbox = new Checkbox("No", CircleInOutGroup, !movingCircleOut); outsideCheckbox = new Checkbox("Yes", CircleInOutGroup, movingCircleOut); insideCheckbox.setForeground(Color.green); outsideCheckbox.setForeground(Color.red); font = new Font("Helvetica", Font.BOLD, 12); insideCheckbox.setFont(font); outsideCheckbox.setFont(font); /* Creiamo un gruppo di 2 caselle di controllo di nome (insideCheckbox) e (OutsideCheckbox) con un testo ("NO") e ("SI") */ controlPanel.add(insideCheckbox); controlPanel.add(outsideCheckbox); //E le aggiungiamo al Pannello } public boolean handleEvent(Event ev) /* Questa istruzione ha lo scopo di registrare ogni movimento delle barre di scorrimento, e ogni clic del mouse sulle caselle di controllo. */ { if (ev.target instanceof Scrollbar) { int value = ((Scrollbar)ev.target).getValue(); if (ev.target == scrolls1) { sliderLabel1.setText(sliderTextR + Integer.toString(value)); n1 = value; } else if (ev.target == scrolls2) { sliderLabel2.setText(sliderTextr + Integer.toString(value)); n2 = value; } else if (ev.target == scrolls4) { sliderLabel4.setText(sliderTextO + Integer.toString(value)); n4 = value; } else if (ev.target == scrolls3) { sliderLabel3.setText(sliderTextn + Integer.toString(value)); n3 = value; } repaint(); /* Poichè ad ogni barra di scorrimento è associata una variabile, quando vi è uno scorrimento di un barra, automaticamente viene cambiato il valore della relativa variabile. */ } if ( ev.target == insideCheckbox || ev.target == outsideCheckbox ) { repaint(); /* Lo stesso accade per le caselle di controllo (quando si clicca sulle caselle di controllo si cambia il valore della variabile relativa.) */ } return true; } public void paint(Graphics g) { w = getSize().width -120; h = getSize().height; /* (w = getSize (). larghezza -120) Alla variabile viene assegnato il valore della la larghezza della tela su cui viene disegnato l'applet, ma vengono sottratti 120 pixel perché le barre di scorrimento occupano 120 pixel. */ dist= (2.5/(w))/zoom; distx=0; m=n3; maxLoop = maxLoop + (int)(m*log(zoom)); b=0; if (outsideCheckbox.getState()){ clea = 10000; /* Se "sì" si fa clic sulla casella di controllo, il quadrato e il cerchio al centro vengono cancellati, perché il "clea" variabile è impostata su 10000, e questo valore viene aggiunto alla coordinata X del cerchio e del quadrato, quindi abbiamo un valore talmente alto, che escono dai confini della tela e dunque risulteranno invisibili, teoricamente sono sempre disegnati entrambi ma in questo caso non saranno visibili. */ } if (insideCheckbox.getState()){ clea=0; /* mentre se clicca sulla casella di controllo (no), il quadrato e il cerchio vengono disegnati, perché la variabile "clea" è impostata a 0, e quindi non viene aggiunto nulla alle due coordinate X del cerchio e del quadrtao predefinite, che perciò verrano disegnati normalmente. */ } while ( b <= w){ distx =(distx + dist); disty =0; p= 0; while (p <= h){ disty =(disty + dist); xreal = (xbegin - distx )+(1.25/(zoom)) ; yimag = (ybegin - disty )+(1.25/(zoom)) ; zr = 0; zi = 0; nx=0; ny=0; loop= 0; zxy=0; do { loop= loop+1; nx= (zr*zr - zi*zi)-xreal; ny= (2*zr*zi)-yimag; zr = nx; zi = ny; zxy = (zr*zr + zi*zi); if (zxy >=4 ) { loop = loop + maxLoop; } } while (loop <= maxLoop ); if (loop < (n1*20+n2)) modulo=1; else modulo = 255; /* Se il numero di cicli è inferiore "n1 n2 * 20 +", allora il, modulo è = 1, altrimenti il modulo è = 255. Praticamente usiamo le barre di scorrimento "a" = n1, e "b" = n2, per regolare il valore del modulo. Questo ci permette di attivare o disattivare i pixel che non ci interessano. */ redcol= (loop)%modulo; greencol = (loop+126)%modulo; bluecol= loop%n4; /* Quando il numero di cicli sono meno "n1 * 20 + n2" e quindi il modulo = 1, e dato che il resto di una divisione per 1 = zero il colore risultante sarà nero, praticamente agendo sulle barre di scorrimento n1 e n2, si ppotranno colorare solo i punti che richiedono molti loop di superare la barriera dell'insieme di Mandelbrot. Questa selezione porta a far emergere solo alcuni dettagli e rende il design più piacevole. Il colore blu è regolata dalla n4 barra di scorrimento usiamo per aggiungere un tocco di colore in caso di necessità. La barra di scorrimento n3 regola il numero dei cicli, perché quando si raggiunge un numero elevato di ingrandimenti, a volte è necessario utilizzare molti loop. */ if (zxy < 4){ redcol=0; greencol =0; bluecol = 0;} //se il valore di ZXY è inferiore a 4, i colori RGB sono = 0, e abbiamo un colore nero. g.setColor(new Color(redcol, greencol,bluecol)); g.drawLine(b,p, b,p); p =(p+1); } b =(b+1); } g.setColor(new Color(255, 255,255)); // Seleziona il colore bianco. g.drawRect(w/2-w/10-clea,w/2-w/10, w/5,w/5); g.drawOval(w/2-w/40-clea,w/2-w/40, w/20, w/20); //Disegna un quadrato e un cerchio al centro dell'applet. maxLoop=50; //Riportiamo ancora la variabile maxLoop = 50, perché altrimenti diventa troppo alta. showStatus( " zoom = " +zoom); //mostra il numero degli zoom. } public void mouseClicked(MouseEvent evt) { Object source = evt.getSource(); if(evt.getButton() == MouseEvent.BUTTON3){ zoom =zoom/5; maxLoop= maxLoop /2; if (maxLoop < 80)maxLoop=80; } if(evt.getButton() == MouseEvent.BUTTON2){ } if(evt.getButton() == MouseEvent.BUTTON1){ zoom =zoom *5; m = n3; int startx = evt.getX(); int starty = evt.getY(); if (startx >= (w/2)) { int startx2= startx -(w/2); xbegin =xbegin - ((startx2)* (dist)); } else{ if (startx < (w/2)) { int startx2 = (w/2) - startx; xbegin =xbegin + (startx2* (dist)); } } if (starty >= (w/2)) { int starty2= starty -(w/2); ybegin =ybegin -((starty2)* (dist)); } else{ if (starty <(w/2)) { int starty2 = (w/2) - starty; ybegin =ybegin + (starty2* (dist)); } } } repaint(); } public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e){ } public void mouseEntered(MouseEvent e) {} public void mouseExited(MouseEvent e) {} public void mouseMoved(MouseEvent e) {} public void mouseDragged(MouseEvent e) {} }

Potete selezionare il testo, copiarlo e incollarlo all'interno di un applet chiamto Mand_Scroll2, compilatelo ed eseguitelo, dovreste vedere delle immagine simili a queste sopra.

Ricordatevi i punti colorati in nero appartengono all'insieme di Mandelbrot

E le zone più interessanti, quelle con le immagini più spettacolari si trovano al confine del bordo nero, dove iniziano le zone colorate, se guardate la prima immagine in alto vedrete che il punto iniziale scelto per gli ingrandimenti si trova proprio subito oltre il confine della zona colorata di nero. Vediamo cosa succede quando clicchiamo sull'applet; praticamente il punto dove abbiamo cliccato viene spostato al centro dell'applet e contemporaneamente il lato del piano complesso in esame viene ridotto di 5 volte, poichè inizialmente era di "2,5 x 2,5" al primo click del mouse diventa "0,5 x 0,5" ma poichè questa superfice viene spalmata sempre su "500 x 550" pixel avremo ingrandito di 5 volte il lato del piano complesso preso in esame e lo stesso succederà ogni volta che clicchiamo col tasto sinistro del mouse.
Nota che se il lato aumenta di 5 volte la superfice che è lato per lato, aumenta di 25 volte, il numero degli ingrandimenti che appare sotto ogni disegno è riferito al lato, perciò se riferito alla superfice va moltiplicato per 5.


In breve, quando clicchiamo con il mouse in un punto sullo schermo, se il punto selezionato è oltre la metà destra dell'applet, il nuovo punto di partenza viene arretrato nella metà sinistra, se il punto scelto si trova nella metà sinistra dell'applet, il nuovo punto di partenza viene spostato a destra dello schermo, nello stesso modo se il punto selezionato è sopra il centro dello schermo, viene spostato verso il basso, mentre se viene scelto al di sotto del centro viene spostato sopra. A questo punto si divide 2.5 per il numero di pixel della larghezza "w" dell'applet, e per il valore di zoom. Così il divario tra i due pixel consecutivi corrisponde a dist = (2,5 / w) / zoom;